<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-if="!addspotCheckShow" v-permission="'material.add'">创建
    </el-button>
    <div class="filter-container">
      <el-cascader v-model="query.type_id" filterable style="width: 260px;" placeholder="设备类型" clearable
        class="filter-item" @keyup.enter.native="research" @clear="research" :props="MachineTypeProps"
        :options="MachineType">
      </el-cascader>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading"
        v-if="!addspotCheckShow">导出 </el-button>

    </div>
    <z-table :list="list" ref="multipleTable" :tableProps="tableProps" :columns="columns" @editItem="editItem"
      @deleteItem="deleteItem" @selection-change='selectionChange'>
      <template v-slot:content="v">
        <span v-if="v.key == 'method'">
          {{getMatchingData(v.row[v.key],'method')}}
        </span>
        <span v-else-if="v.key=='pattern'">
          {{v.row[v.key]== 0 ? '勾选' :'填值'}}
        </span>
        <span v-else>{{ v.row[v.key] }}</span>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getLists"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import { deleteChildren } from '@/utils/index.js'
export default {
  name: 'spotCheckItem',
  mixins: [commonMixin],
  components: {},
  props: {
    addspotCheckShow: {
      type: Boolean,
      default: false,
    },
    spotCheckIds: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  data() {
    return {
      query: {
        type_id: '',
        page: 1,
        size: 10,
      },
      name: '点检项',
      tableProps: {
        border: true,
        opsColWith: 90,
        fixed: false,
        hideOperations: false,
      },
      api: this.$api.TpmSpotCheckItem,
      baseUrl: this.$api.baseUrl,
      MachineType: [],
      postForList: true,
      MachineTypeProps: {
        label: 'machine_type_name',
        value: 'id',
        children: 'child',
        emitPath: false,
      },
      methodOptions: [],
      columns: [
        { title: '设备类型', key: 'machine_type_name' },
        { title: '点检内容', key: 'content' },
        { title: '点检标准', key: 'standard' },
        { title: '点检方法', key: 'method' },
        { title: '点检形式', key: 'pattern' },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改时间', key: 'modify_time', width: 100 },
      ],
      fields: [
        {
          title: '设备类型',
          key: 'type_id',
          span: 8,
          name: 'cascader',
          props: {
            filterable: true,
            checkStrictly: true,
            props: {
              children: 'child',
              value: 'id',
              label: 'machine_type_name',
              emitPath: false,
            },
          },
          options: [],
        },
        {
          title: '点检方法',
          key: 'method',
          span: 8,
          name: 'select',
          required: true,
          options: [],
        },
        {
          title: '点检形式',
          key: 'pattern',
          span: 8,
          name: 'radio',
          required: true,
          options: [
            { label: '勾选', value: 0 },
            { label: '填值', value: 1 },
          ],
        },
        { title: '点检内容', key: 'content', span: 24, required: true, name: 'textarea' },
        {
          title: '点检标准',
          key: 'standard',
          span: 24,
          required: true,
          name: 'textarea',
        },
      ],
      spotCheckItms: [],
    }
  },
  computed: {},
  watch: {
    addspotCheckShow: {
      immediate: true,
      handler(val, old) {
        if (val) {
          this.tableProps = {
            border: true,
            opsColWith: 160,
            fixed: false,
            hideOperations: true,
            selection: {
              showSelection: true,
            },
          }
          this.toggleRowSelections()
        } else {
          this.clearSelection()
        }
      },
    },
  },
  created() {
    this.research()
    // 获取设备类型
    this.getMachineType()
    this.getpositions()
  },
  mounted() {},
  methods: {
    // 多选默认选中
    toggleRowSelections() {
      setTimeout(() => {
        this.spotCheckIds.forEach((row) => {
          let tmp = this.list.find((item) => item.id === row)
          this.$refs.multipleTable.$refs.elTable.toggleRowSelection(tmp)
        })
      }, 200)
    },
    clearSelection() {
      this.$nextTick(() => {
        this.$refs.multipleTable.$refs.elTable.clearSelection()
      })
    },
    getLists() {
      if (this.addspotCheckShow) {
        this.toggleRowSelections()
        this.getList()
      } else {
        this.getList()
      }
    },
    getMachineType() {
      this.$request(this.baseUrl + 'Tpm/MachineType/GetTreeList').then((r) => {
        let tmp = deleteChildren(r, 'child')
        this.MachineType = tmp
        let tmpMa = this.fields.find((i) => i.key == 'type_id')
        tmpMa.options = tmp
      })
    },
    // 获取点检方法
    getpositions() {
      this.$request(this.$api.dictionary + 'getdirectchildren', {
        parentType: 'spotcheckMethod',
      }).then((r) => {
        this.methodOptions = r.map((i) => ({
          label: i.label,
          value: i.value * 1,
        }))
        this.getFieldConfig('method').options = this.methodOptions
      })
    },
    submit() {
      this.submitLoading = true
      this.$request(this.api + 'add', this.data, 'post')
        .then((r) => {
          this.$message.success('操作成功')
          this.editFormVisible = false
          this.getList()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    // 选择点检项
    selectionChange(val) {
      let spotCheckData = []
      val.forEach((i) => {
        if (i) {
          spotCheckData.push(i)
        }
      })
      this.$emit('add-spotCheck', spotCheckData)
    },
    // 获取匹配数据
    getMatchingData(val, code) {
      if (code == 'method') {
        let tmp = this.methodOptions.find((i) => i.value == val)
        return tmp ? tmp.label : ''
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>